<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script>
        function f1(){
            let btn = document.getElementById("btn1");
            // 取值
            console.log("type属性:"+btn.getAttribute("type"))
            console.log("value属性:"+btn.getAttribute("value"))
            console.log("id属性:"+btn.getAttribute("id"))
            console.log("a属性:"+btn.getAttribute("a"))
            console.log("onclick属性:"+btn.getAttribute("onclick"))

            // 赋值
            btn.setAttribute("value","这是更改后的访问HTML属性")
        }
        function f2(){
            let btn = document.getElementById("btn2");
            // 取值
            console.log("type属性:"+btn.type);
            console.log("value属性:"+btn.value);
            console.log("id属性:"+btn.id);
            console.log("a属性:"+btn.a);
            console.log("onclick属性:"+btn.onclick);

            // 赋值
            btn.value = "这是更改后的访问DOM属性"
        }
    </script>
</head>
<body>
<input type="button" value="访问HTML属性" id="btn1" a="b" onclick="f1()"><br>
<input type="button" value="访问DOM属性" id="btn2" a="bb" onclick="f2()">
</body>
</html>